<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <section class="user_balance_box">
      <!-- teb切换 -->
      <div class="Order_adm_teb dip ju_al_bet">
        <span class="Order_adm_teblist" v-for="(items,index) in tebOrderAdm" :key="index" @click="getOrderADm(index)" :class="{'tebOrderactive':items.ind}">{{items.text }}</span>
      </div>
      <!-- 列表 -->
      <ul class="Order_adm_ul dipW clearfix" :class="{'mArginTOP_order':MArgin_TOPORDER}">
        <li class="Order_adm_list clearfix dipW" v-for="(listd,index) in OrderAdmlist" :key="index" @click="getorderAdmDetilas(listd.id)"  v-show="nonelist">
          <p class="Order_list_title dip ju_al_bet">
            <span class="Order_adm_date">订单日期：{{listd.createDate}}</span>
            <span class="Order_adm_state Order_adm_stateCor">{{listd.currentState}}</span>
          </p>
          <div class="Order_list_con dip ju_al_bet">
            <p class="Order_Comm_text dipW ju_al_lf">
              <span class="user_con_ifontitleTop">{{listd.requirements}}&nbsp;x{{listd.quantity}}</span>
              <!-- <span class="user_con_ifontitlebom">¥&nbsp;{{listd.univalent}}</span> -->
              <span class="user_con_ifontitlebom">¥&nbsp;{{listd.remuneration}}</span>
            </p>
            <span class="user_con_ifontitleTop user_con_cOMMM">{{listd.demandType}}</span>              
            <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
          </div>
        </li>
        <li class="ORder_adm_Nonedata" v-if="dataNone">暂无任务</li>
      </ul>
    </section>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
import Spe from '../../../src/assets/bus/js/Specific.js'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/userContent',
        text:'',
      },
      tebOrderAdm:[
        {
          text:'全部',
          ind:true,
        }
        , {
          text:'海报',
          ind:false,
        }
        , {
          text:'宣传片',
          ind:false,
        }
      ],
      OrderAdmlist:'', //任务列表
      dataNone:false,//显示没有列表
      MArgin_TOPORDER:true, //类名控制
      Tash:'',//页面参数
      nonelist:true, //没数据不显示
    }
  }
  ,methods:{
    getOrderADm(ifs){
      for(var i = 0;i<this.tebOrderAdm.length;i++){
        this.tebOrderAdm[i].ind = false
      }
      this.tebOrderAdm[ifs].ind = true
      if(ifs == 1){
        this.OrderAdm(1,'00')
      }else if(ifs == 2){
        this.OrderAdm(1,'01')
      }else{
        this.OrderAdm(1)
      }
    },
    getorderAdmDetilas(id){
      sessionStorage.setItem('demandId',id)
      this.$router.push({
        path:'/bomNav/Ordershuo'
      })
    },
    TaskJIonIssue(){
      //logding
      this.Tash = this.$route.params.Task == 'join' ? 'access' : 'publish';
      this.urls.text = this.$route.params.Task == 'join'? '我参加的任务': '我发布的任务';
      // console.log(this.Tash)
      // if(this.Tash == 'join'){
      //   this.urls.text= '我参加的任务'
      // }else if(this.Tash == 'issue'){
      //   this.urls.text= '我发布的任务'
      //   // this.OrderAdm(1) //发布任务
      // }
      this.OrderAdm(1) //参加任务
      
    },
    OrderAdm(number,type){ 
      this.$store.dispatch('showloader')
      var f = type == '' ?'':type; //类型
      this.axios.post(this.$busPoat.mydemands(),{
        "requirements":f,  //任务累心
        "requireTime":null,
        "currentState":null,
        "distinguish":this.Tash,
        "currentPage":number, 
        "pageSize":"10"
      }).then(res =>{
        console.log(res.data)
         var st;
          clearTimeout(st)
          st = setTimeout(() =>{
            if(res != null || res != undefined){
              if(res.data.iplancode == 200 || res.data.iplancode == 201 && res.data.demands.length >= 1){
                sessionStorage.setItem('orderAdm',JSON.stringify(res.data.demands))
                this.OrderAdmlist = JSON.parse(sessionStorage.getItem('orderAdm'))     
                Spe.specilcArr(this.OrderAdmlist)
                this.dataNone = false     
                this.MArgin_TOPORDER = true  
                this.nonelist = true
                this.$store.dispatch('hideloader')   
              }else if(res.data.iplancode == 101 && res.data.demands.length <=0){
                this.dataNone = true
                this.nonelist = false       
                this.MArgin_TOPORDER = false
                this.$store.dispatch('hideloader')  
              }
              if(JSON.stringify(res.data) == "{}"){
                this.dataNone = true
                this.nonelist = false       
                this.MArgin_TOPORDER = false
                this.$store.dispatch('hideloader')  
              }
            }else{
            this.$store.dispatch('hideloader')
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },1000)
      }).catch(error=>{
        this.$store.dispatch('hideloader')
        alert('获取失败')
        this.MArgin_TOPORDER = false
        this.nonelist = false
        this.dataNone = true        
      })
    },
  }
  ,components:{Nav} //引入组件
  ,created(){
    this.TaskJIonIssue()
    // this.OrderAdm(1)
  }
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  // position: fixed;
}
.user_balance_box{
  margin-top:.8rem;
  width: 100%;
  height: 100%;
  color:#666;
  font-weight: 600;
  .Order_adm_teb{
    width: 100%;
    height: 0.8rem;
    background: #fff;
    position: relative;
    padding:0rem .76rem;
    .Order_adm_teblist{
      height: 100%;
      line-height: .8rem;
      font-size: .24rem;
    }
    .tebOrderactive{
      color:#FF7200;
      // padding-bottom:20%;
      border-bottom:.04rem solid #FF7200
    }
  }
  .Order_adm_ul{
    width: 100%;
    position: relative;
    // margin-top:.2rem;
    .Order_adm_list{
      background: #fff;
      width: 100%;
      margin-bottom:.2rem;
    }
    .ORder_adm_Nonedata{
      width: 100%;
      position: relative;
      top:0;
      left:0;
      background:#fff;
      font-size: .6rem;
      font-weight: 500;
      text-align: center;
      height: 4rem;
      line-height: 4rem;
    }
  }
  .mArginTOP_order{
    margin-top:.2rem;
  }
}
.Order_list_title{
  width: 100%;
  height: 0.86rem;
  padding:0rem .4rem;        
  border-bottom:.02rem solid #f2f2f2;
  .Order_adm_date{
    font-size: .24rem;
    color:#aaa;
  }
  .Order_adm_state{
    font-size: .26rem;
  }
  .Order_adm_stateCor{
    color:#FF7200;
  }
}
.Order_list_con{
  width: 100%;
  height: 1.6rem;
  padding:.3rem .4rem .26rem ;
  .Order_list_ifonImg{
    height: 1.24rem;
    max-width: 1.24rem;
    width: 18.51%;
    margin-right:4.5%;
    // background: #000;
    img{
      width: 100%;
      height: 100%;
    }
  }

  // .Order_Comm_title{
  //   height: 1.24rem;
  //   width: 100%;
    .Order_Comm_text{
      padding-left:5%;
      height: 100%;
      max-width: 4.84rem;
      width: 43%;
      font-size: .24rem;      
      .user_con_ifontitleTop{
        width: 100%;
      }
      .user_con_ifontitlebom{
        width: 100%;        
        color:#FF7200;
      }
    }
    .user_con_cOMMM{
      width: 53%;
    }
    .user_con_ifonBoxjiantou{
      width: 3%;
      height: 25%;
      margin-right:2%;
    }
  // }
}
</style>
